<template>
  <el-drawer
    v-model="visible"
    :title="`生产详情`"
    direction="rtl"
    :before-close="handleClose"
  >
    <div class="common-group-details-item">
      <div style="font-size:26px;font-weight:bold;">
      No.{{record.group_id}}<span style="color:#529b2e;">【{{ddo.text('groupStatus',record.pd_id)}}】</span>
      </div>
    </div>
    <div class="common-group-details-item">
      <label>计划号：</label><span>{{record.plan_id}}</span>
    </div>
    <div class="common-group-details-item">
      <label>产品类型：</label><span>{{ddo.text('prodTypes',record.plan_type)}}</span>
    </div>
    <div class="common-group-details-item">
      <label>产品客户：</label><span>{{record.cus_name}}</span>
    </div>
    <div class="common-group-details-item">
      <label>产品规格：</label><span>{{record.std_name}}</span>
    </div>
    <div class="common-group-details-item">
      <label>产品花色：</label><span>{{record.color_name}}</span>
    </div>
    <template v-for="pn in processNodeList" :key="pn.pn_id" >
      <div class="common-group-details-item" style="border-bottom:none;padding-bottom:8px;" >
        <label>{{pdId2NumNameMap[pn.pd_id].label}}：</label><span>{{record[pdId2NumNameMap[pn.pd_id].prop]}}米</span>
      </div>
      <div class="common-group-details-item" style="border-bottom:none;padding:8px 15px 8px 30px;font-size:14px;">
        <label>操作时间：</label><span>{{pn.pn_date}}</span>
      </div>
      <div class="common-group-details-item" style="padding:8px 15px 8px 30px;font-size:14px;">
        <label>操作人：</label><span>{{pn.pn_per}}</span>
      </div>
    </template>    
  </el-drawer>
</template>

<script setup >
import { reactive, ref ,computed} from "vue";
import { tip, get, post, put, del, ddo,elConfirm } from "@/common";

//流程状态与数量字段的对应关系
const pdId2NumNameMap = {
  1010:{prop:'group_num',label:'投坯产量'},
  1020:{prop:'pretreat_num',label:'前处理产量'},
  1030:{prop:'dye_num',label:'染色产量'},
  1040:{prop:'print_num',label:'印花产量'},
  1050:{prop:'arrange_num',label:'整理产量'},
  1060:{prop:'check_num',label:'质检产量'},
  1070:{prop:'check_num',label:'质检产量'}
};

const processNodeList = ref([]);

const getProcessNodesByGroupId = (group_id)=>{
    get('/process/nodes/'+group_id+"/1").then(result=>{
        processNodeList.value = result.data;       
    });
};


const visible = ref(false);
const open = (item) => {
  getProcessNodesByGroupId(item.group_id);
  record.value = item;
  visible.value = true;
};
const handleClose = (done) => {
  done();
};

const record = ref({});






defineExpose({ open });
</script>

<style scoped>
.common-group-details-item{
  padding:15px 15px;
  border-bottom:1px dashed #DDDDDD;
  margin: 0px 10px;
  font-size:18px;
  display: flex;
  justify-content:space-between;
  color:#606266;
}
.common-group-details-item>lable{
  width:200px;

}
</style>